<template>
    <div class="container">
        <p class="appName">
            Smarts Vay
        </p>
        <div class="desc">
            Đăng nhập/đăng ký để có cơ hội nhận <span>25,000,000</span> Đồng Việt Nams
        </div>
        <div class="phoneAndCode">
            <div class="phoneArea">
                <div :style="phoneBorderStyle" class="phoneRow inputClass">
                    <div style="display: flex; align-items: center; border-right: 1px solid #DCDCE0">
                        <img style="display:block; width: 1.2rem;height: 1.2rem;" src="@/assets/phoneIcon.png" alt="">
                        <p>&nbsp; +84 &nbsp;</p>
                    </div>
                    <input type="text" v-model="phoneNum" placeholder="Xin vui lòng nhập số" name="" id=""
                        maxlength="10" @input="phoneChangeHandler" @focus="phoneFocus" @blur="phoneBlur">
                </div>
                <p class="errorClass" v-if="phoneStatus == 3">Vui lòng nhập đúng số điện thoại</p>
            </div>
            <div class="codeArea">
                <div class="codeRow inputClass" :style="codeBorderStyle">
                    <div style="display: flex; align-items: center;">
                        <img style="display:block; width: 1.2rem;height: 1.2rem;" src="@/assets/codeIcon.png" alt="">
                        <input type="text" v-model="codeNum" placeholder="Điền mã xác minh" name="" id=""
                            @input="codeChangeHandler" @focus="codeFocus" @blur="codeBlur">
                    </div>

                    <span class="getCodeClass" v-if="!showSeconds" @click="clickGetCodeBtnHandler"
                        :class="{ 'activeCodeClass': btnCanClick }">Gửi</span>
                    <span class="seconds" v-if="showSeconds">{{ secondsNum }}s</span>
                </div>
                <p class="errorClass" v-if="codeStatus == 3">Vui long nhập đúng mã xác nhận</p>
            </div>
        </div>

        <div class="loginBtn" :class="{ 'loginBtnActive': showCodeInput && codeStatus != 3 && codeNum.length == 4 }"
            @click="loginBtnClick">
            Nộp
        </div>
        <!-- <div class="loginBtn" :class="{ 'loginBtnActive': btnCanClick }" @click="loginBtnClick">
            Nộp
        </div> -->
    </div>
</template>

<script setup lang='ts'>
import { Toast } from 'tdesign-mobile-vue';
import { computed, onMounted, ref, watch } from 'vue';
import Api from '@/api/index'
import { useOverAllStore } from '@/stores/overAll'
import { useRouter } from 'vue-router';
import { useLoadingStore } from '@/stores/loading';

let overAllStore = useOverAllStore();
let loadingStore = useLoadingStore()

const router = useRouter()

let phoneStatus = ref(1)
let codeStatus = ref(1)

let showCodeInput = ref(false)

let phoneNum = ref('')

let codeNum = ref('')

let secondsNum = ref(0)

let showSeconds = ref(false)

let btnCanClick = ref(false)


const phoneBorderStyle = computed(() => {
    return {
        borderColor: phoneStatus.value == 1 ? 'transparent' : (phoneStatus.value == 2 ? '#009959' : '#E54922'),
    };
});
const codeBorderStyle = computed(() => {
    return {
        borderColor: codeStatus.value == 1 ? 'transparent' : (codeStatus.value == 2 ? '#009959' : '#E54922'),
    };
});


const getCodeHandler = async () => {
    try {

        let codeRes = (await Api.getSMSCode({ 'phoneNo': phoneNum.value, 'veriType': 'LOGIN', 'reqSource': 'web' })).data
        if (codeRes.code == '0') {
            Toast({
                message: codeRes.message,
                duration: 5 * 1000
            });

            secondsNum.value = 60;
            showSeconds.value = true

            let timer = setInterval(() => {
                secondsNum.value--;
                if (secondsNum.value < 0 || !showCodeInput.value) {
                    clearInterval(timer)
                    showSeconds.value = false
                }
            }, 1000)
        } else {
            Toast({
                message: codeRes.message,
                duration: 5 * 1000
            });
        }
    } catch (error) {
        console.log('error')
    }

}

const clickGetCodeBtnHandler = async () => {
    if (btnCanClick.value) {
        try {
            let res = (await Api.checkedIsOldCustomer({ 'telMobile': phoneNum.value, 'reqSource': 'web' })).data
            if (res.code == '200') {

                showCodeInput.value = true
                getCodeHandler()
            } else if (res.code == '202') {
                Toast({
                    message: 'Tạm thời chỉ cung cấp dịch vụ cho người dùng cũ；',
                    duration: 3 * 1000
                })
                showCodeInput.value = false
            } else if (res.code == '201') {
                Toast({
                    message: res.message,
                    duration: 3 * 1000
                })

                showCodeInput.value = false
                phoneStatus.value = 3
            } else {
                Toast({
                    message: res.message,
                    duration: 3 * 1000
                })
            }

        } catch (error) {
            console.log(error);
            Toast({
                message: 'Error',
                // type: 'error',
                duration: 5 * 1000
            })
        }

    }
}


const phoneFocus = () => {
    phoneStatus.value = 2;
}

const phoneBlur = () => {
    phoneStatus.value = 1
}

const codeFocus = () => {
    codeStatus.value = 2
}
const codeBlur = () => {
    codeStatus.value = 1
}



watch(() => phoneNum.value, (newValue, oldValue) => {
    if (newValue.length == 10) {
        btnCanClick.value = true
    } else {
        btnCanClick.value = false
    }
})



const loginBtnClick = async () => {
    if (showCodeInput.value) {
        if (codeNum.value.length != 4) {
            codeStatus.value = 3
            return;
        } else {
            let loginRes = await overAllStore.login({
                contactMobile: phoneNum.value,
                captchaCode: codeNum.value,
                deviceOS: 'P1003',
                reqSource: 'web'
            })
            if (loginRes.code == '0') {
                // success
                router.replace({
                    path: '/home'
                })
                // loadingStore.showLoading(false)
            } else if (loginRes.code == '201') {
                Toast({
                    message: loginRes.message,
                    duration: 3 * 1000
                })
                codeStatus.value = 3
                loadingStore.showLoading(false)
            } else {
                Toast({
                    message: loginRes.message,
                    duration: 3 * 1000
                })
                loadingStore.showLoading(false)
            }
        }

    }

}



const phoneChangeHandler = async () => {

    phoneNum.value = phoneNum.value.replace(/\D/g, '')

    if (phoneNum.value.length > 10) {

        phoneNum.value = phoneNum.value.slice(0, 10)
    }

}


const codeChangeHandler = () => {
    codeNum.value = codeNum.value.replace(/\D/g, '')

    if (codeNum.value.length > 4) {
        codeNum.value = codeNum.value.slice(0, 4)
    }
}

</script>

<style lang="less" scoped>
.container {
    height: 100%;
    padding: 3.5rem .8rem;

    .errorBorder {
        border: 1px solid #E54922;
    }

    .appName {
        font-family: SF Pro, SF Pro;
        font-weight: 800;
        font-size: 28px;
        color: #009959;
        line-height: 42px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .desc {
        font-family: SF Pro, SF Pro;
        font-weight: 400;
        font-size: .6rem;
        color: #626673;
        line-height: 1.1rem;
        text-align: left;
        font-style: normal;
        text-transform: none;

        &>span {
            font-size: .6rem;
            color: #FF9326;
            font-weight: 600;
        }
    }

    .phoneAndCode {
        margin-top: 1.3rem;

        .phoneArea,
        .codeArea {
            margin-bottom: .8rem;
        }




        .inputClass {
            height: 2.8rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: .6rem 1rem;

            background: #F7F7FA;
            border-radius: .4rem;
            border: 1px solid transparent;

            input {
                border: none;
                background: transparent;
                outline: none;
                margin-left: .6rem;

                font-family: SF Pro, SF Pro;
                font-weight: 400;
                font-size: .8rem;
                color: #292B33;
                line-height: 1.2rem;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            input::placeholder {
                color: #C2C4CC;

            }

            ::-webkit-input-placeholder {
                /* WebKit, Blink, Edge */
                color: #C2C4CC;
            }

            :-moz-placeholder {
                /* Mozilla Firefox 4 to 18 */
                color: #C2C4CC;
                opacity: 1;
                /* Firefox needs this to show placeholder text in older versions */
            }

            ::-moz-placeholder {
                /* Mozilla Firefox 19+ */
                color: #C2C4CC;
                opacity: 1;
                /* Firefox needs this to show placeholder text in older versions */
            }

            :-ms-input-placeholder {
                /* Internet Explorer 10-11 */
                color: #C2C4CC;
            }
        }

        .phoneRow {
            p {
                font-family: SF Pro, SF Pro;
                font-weight: 400;
                font-size: 16px;
                color: #212E14;
                line-height: 24px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        .codeRow {
            justify-content: space-between;

            .getCodeClass {
                font-family: SF Pro, SF Pro;
                font-weight: 400;
                font-size: .8rem;
                color: #ccc;
                line-height: 1.2rem;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            &>.seconds {
                font-family: SF Pro, SF Pro;
                font-weight: 400;
                font-size: 16px;
                color: #9599A6;
                line-height: 24px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        .errorClass {
            color: #E54922;
        }

        .inputFocusClass {
            border: 1px solid #009959;
        }

        .activeCodeClass {
            color: #009959 !important;
        }
    }

    .loginBtn {
        width: 100%;
        height: 2.8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #76C4A4;
        border-radius: 8px;
        padding: .65rem;
        box-sizing: border-box;

        font-family: SF Pro, SF Pro;
        font-weight: 600;
        font-size: 20px;
        color: #FFFFFF;
        font-style: normal;
        text-transform: none;
    }

    .loginBtnActive {
        background: #009959;
    }
}
</style>